<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2019-01-15
  Time: 11:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>品牌管理</title>
    <jsp:include page="${pageContext.request.contextPath}/common/tag.jsp"/>
</head>
        <script>
           /* $.post("{pageContext.request.contextPath}/brand/query",function (data) {
                $.each(data,function (index,item) {
                    $("#bid").append("<option value=\""+ item.bid +"\">"+item.bname+"</option>")
                })
            })*/
            $(function () {

                $("#mytable").bootstrapTable({
                    url:'${pageContext.request.contextPath}/brand/query',
                    type:'post',
                    toolbar:'#add',
                    height:400,
                    pageSize:4,//页面显示的行数
                    pageList:[2,4,8,16],
                    columns:[
                        {field:'bid',title:'编号',align:'center'},
                        {field:'bname',title:'名称',align:'center'},
                        {title:'操作',align:'center',
                        formatter:function (value,row,index) {
                            return  "<button class=\"btn btn-primary\" id=\"edits\" data-toggle=\"modal\" href=\"#addmoda2\" onclick='edit(("+row.bid+"))'><span class=\"glyphicon glyphicon-edit\"></span>修改</button>&nbsp;&nbsp;<button class=\"btn btn-primary\" onclick='shanchu("+row.bid+")'><span class=\"glyphicon glyphicon-trash\"></span>&nbsp;&nbsp;删除</button>";
                            }
                        }
                    ]
                });
                $('#form1').bootstrapValidator({
                    message: 'This value is not valid',
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        /* validating: 'glyphicon glyphicon-refresh'*/
                    },
                    fields: {
                        bname: {
                            message: '请输入商品名称',
                            validators: {
                                notEmpty: {
                                    message: '商品名称不能为空！'
                                }
                            }
                        }
                    }
                });
                $('#form2').bootstrapValidator({
                    message: 'This value is not valid',
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        /* validating: 'glyphicon glyphicon-refresh'*/
                    },
                    fields: {
                        bname: {
                            message: '请输入商品名称',
                            validators: {
                                notEmpty: {
                                    message: '商品名称不能为空！'
                                }
                            }
                        }
                    }
                });
            });



        </script>
<body style="margin: 20px 20px;overflow-y: hidden">
<div>
    <button class="btn btn-primary" id="add" data-toggle="modal" href="#addmoda1"><span class="glyphicon glyphicon-plus"></span>添加</button>
    <%--<form class="form-inline" style="text-align: right">
        <div class="form-group">
            <label class="control-label">请选择商品名称</label>
            <select class="form-control" name="bid" id="bid">
                <option value="0">全部</option>
            </select>
        </div>
        <button class="btn btn-primary" onclick="querys()"><span class="glyphicon glyphicon-search"></span>搜索</button>
    </form>--%>
    <div class="modal fade" id="addmoda1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">添加品牌</h4>
                </div>
                <div class="modal-body">
                    <form id="form1"  method="post" class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="control-label col-sm-2">品牌名:</label>
                            <div class="col-sm-10">
                                <input type="text" name="bname" class="form-control">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="toadd()">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <div class="modal fade" id="addmoda2">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">修改品牌</h4>
                </div>
                <div class="modal-body">
                    <form id="form2"  method="post" class="form-horizontal" role="form">
                        <input type="hidden" name="bid" id = "id">
                        <div class="form-group">
                            <label class="control-label col-sm-2">品牌名:</label>
                            <div class="col-sm-10">
                                <input type="text" name="bname" id = "name" class="form-control">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="toedit()">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <table id="mytable"></table>
</div>
</body>
<script>
    function querys() {
        var options =  $("#mytable").bootstrapTable("getOptions");
        var limit = options.pageSize;
        var offset = (options.pageNumber-1)*limit;
        var bid = $("#bid").val();
        $.post("${pageContext.request.contextPath}/brand/querytj",{'offset':offset,'limit':limit,'bid':bid},function (data) {
            $("#mytable").bootstrapTable('load',data);
        })
    }
    function edit(bid){
        $.post("${pageContext.request.contextPath}/brand/selectById",{'bid':bid},function (data) {
            var shuzu = [];
            $.each(data,function (i) {
                shuzu=data[i];
            });
            $("#id").val(shuzu.bid);
            $("#name").val(shuzu.bname);
        })
    }
    function toedit(){
        $("#form2").data("bootstrapValidator").validate();
        var flag = $("#form2").data("bootstrapValidator").isValid() ;
        if(flag){
            var ftms = $("#form2").serialize();
            params = decodeURIComponent(ftms,true);
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/brand/edit',
                data:params,
                success:function (data) {
                    $("#addmoda2").modal('hide');
                    /*从新绑定表格*/
                    $("#mytable").bootstrapTable('load',data);
                }
            });
        }
    }
    $(function () {
        $("#add").click(function () {
            $("#form1")[0].reset();
            $("#form1").data('bootstrapValidator').resetForm();//清除当前验证的关键之
        });
        $("#edits").click(function () {
            $("#form2").data('bootstrapValidator').resetForm();//清除当前验证的关键之
        })
    })
    function toadd() {
        $("#form1").data("bootstrapValidator").validate();
        var flag = $("#form1").data("bootstrapValidator").isValid() ;
        if(flag){
            var formStr=$("#form1").serialize();
            //处理表单控件的中文乱码
            params = decodeURIComponent(formStr,true);
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/brand/add',
                data:params,
                success:function (data) {
                    $("#addmoda1").modal('hide');
                    /*从新绑定表格*/
                    $("#mytable").bootstrapTable('load',data);
                }
            });
        }
    }
    function  shanchu(bid) {
        var con = confirm("确定要删除吗?");
        if(con){
            $.post("${pageContext.request.contextPath}/brand/delete",{"bid":bid},function (data) {
                $("#mytable").bootstrapTable('load',data);
                swal("提示信息","删除成功","success");
            });
        }
    }
</script>
</html>
